<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>物业管理系统员工前台</title>
    <th:block th:fragment="commen-script">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
        <link
                rel="stylesheet"
                href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        />
        <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    </th:block>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">物业管理系统</a>
    <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
    >
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item ">
                <a class="nav-link" href="#"
                >宿舍申请</a
                >
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">审批结果</a>
            </li>

            <li class="nav-item active">
                <a class="nav-link" href="#" tabindex="-1">个人中心<span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <div>
            <span class="hidden-xs text-danger">[[${user.name}]]</span>
            <button class="btn btn-outline-secondary"><a th:src="@{/userlogout}">退出登录</a></button>
        </div>
    </div>
</nav>
<div class="d-flex justify-content-center">
    <div class="w-75 border shadow p-4">
        <div>
            <h3>个人资料</h3>
        </div>
        <div>
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#personal" data-toggle="tab"
                    >资料管理</a
                    >
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#updatepwd" data-toggle="tab">密码管理</a>
                </li>
            </ul>
        </div>
        <br />
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="personal">
                <div class="form-group">
                    <label for="cid">员工ID</label>
                    <input
                            type="text"
                            class="form-control"
                            id="cid"
                            required
                            disabled
                    />
                </div>
                <div class="form-group">
                    <label for="number">身份证号</label>
                    <input
                            type="text"
                            class="form-control"
                            id="number"
                            required
                            disabled
                    />
                </div>
                <form action="update" method="POST">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" required />
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="tel" class="form-control" id="phone" required />
                    </div>
                    <button type="submit" class="btn btn-primary">更新</button>
                </form>
            </div>
            <div role="tabpanel" class="tab-pane" id="updatepwd">
                <form action="updatepwd" method="POST">
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input
                                type="password"
                                class="form-control"
                                id="password"
                                required
                        />
                    </div>

                    <div class="form-group">
                        <label for="check_password">确认密码</label>
                        <input
                                type="password"
                                class="form-control"
                                id="check_password"
                                required
                        />
                        <small id="check_password_help" class="form-text text-success"
                        >应与上面的密码保持一致</small
                        >
                    </div>
                    <input type="submit" class="btn btn-primary" value="修改"/>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    let nameInput = document.getElementById("name");
    let numberInput = document.getElementById("number");
    let cidInput = document.getElementById("cid");
    let phoneInput = document.getElementById("phone");
    nameInput.value = "JSP";
    numberInput.value = "JSP";
    cidInput.value = "JSP";
    phoneInput.value = "JSP";
</script>
</body>
</html>
